<div class="posts">
  <p>The post list is composed by the angular components querying the GraphQL and displaying the result</p>
  <div aria-flowto="<left></left>">
    <h2>Posts list</h2>
    <button class="addBtn" mat-fab [routerLink]="['/posts/new']"> <mat-icon>add</mat-icon></button>
    <br>
  </div>
  <mat-input-container>
    <input matInput type="search" [(ngModel)]='listPostFilter' [formControl]="postControl" placeholder="search...">
  </mat-input-container>
  <mat-card *ngFor="let post of posts | async | postsFilter:listPostFilter">
    <mat-list>
      <mat-list-item>
        <a mat-line [routerLink]="['/posts/post-detail', post.id]"> {{post.title}} </a>
        <p mat-line>
          <span>{{post.content}}</span>
        </p>
        <span><button mat-button (click)='deletePost(post.id)'><mat-icon>delete</mat-icon></button></span>
        <span><button mat-button [routerLink]="['/posts/edit', post.id]"><mat-icon>edit</mat-icon></button></span>
      </mat-list-item>
    </mat-list>
  </mat-card>
</div>
